import { createRouter, createWebHashHistory } from "vue-router";

const Home = () => import("../views/Home.vue");
const About = () => import("../views/About.vue");
const UserCenter = () => import("../views/user-center/index.vue");
const UserProfile = () => import("../views/user-center/Profile.vue");
const UserSettings = () => import("../views/user-center/Settings.vue");
const NotFound = () => import("../views/user-center/404.vue")
const Product = () => import("../views/user-center/Product.vue")
const VuexPage = () => import("../views/Vuex.vue")
const Register = () => import("../views/Register.vue")
const AccountList = () => import("../views/AccountList.vue")


//引入ElementTest
const ElementTest = () => import("../views/ElementTest.vue")
const ListDemo = () => import("../views/ListDemo.vue")
const CompositionApiPage = () => import("../views/composition-api/Index.vue")

const routes= [
    { 
        path: '/', 
        redirect: '/home'
    },
    
    { 
        path: '/home', 
        name:'home', 
        component: Home
    },
    {
        path:'/product/:id',
        name:'product',
        component: Product
    },
    { 
        path: '/about',
        name:'about',
        component: About
    },
    { 
        path: '/composition-api',
        name:'compositionApi',
        component: CompositionApiPage
    },
    {
        path: '/account-list',
        name:'account-list',
        component: AccountList
          
    },
    
    {
        path: "/user",
        name: "userCenter",
        component : UserCenter,
        redirect: '/user/profile',
        
        children: [
            {
                path: "profile",
                name: "profile",
               component : UserProfile
            },
            {
                path: "settings",
                name: "settings",
                component : UserSettings
            },
        ],
    },
    {
        path: '/:pathMatch(.*)*',
        name:'NotFound',
        component: NotFound
    },
    {
        path:'/vuex',
        name:'vuex',
        component:VuexPage
    },
    {
        path:'/element',
        name:'element',
        component:ElementTest
    },
    {
        path:'/ListDemo',
        name:'ListDemo',
        component:ListDemo
    },
    {
        path:'/register',
        name:'register',
        component:Register
    },
    
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})



export default router